<!--
 * @Author: 'YSJ' '951866543@qq.com'
 * @Date: 2024-09-13 16:24:51
 * @LastEditors: 'YSJ' '951866543@qq.com'
 * @LastEditTime: 2024-09-14 10:52:51
 * @FilePath: \smart-subway\src\components\Panel-Components\RealTimeVideo.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <video-player
    :poster="poster"
    crossorigin="anonymous"
    :controls="true"
    :loop="true"
    :volume="0.6"
    :techOrder="['html5', 'flvjs']"
    :muted="true"
    autoplay="true"
    width="500px"
    height="300px"
    @mounted="handleMounted"
  />
</template>

<script setup>
import { VideoPlayer } from '@videojs-player/vue'
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
import { ref } from 'vue'

const props = defineProps({
  src: {
    type: String,
    default:
      'https://gcalic.v.myalicdn.com/gc/wgw01_1/index.m3u8?contentid=2820180516001',
  },
  videoType: {
    type: String,
    default: 'hls',
  },
})
const poster = ref('/src/assets/subway.jpeg')

const handleMounted = ({ player }) => {
  if (props.videoType === 'hls') {
    player.src(props.src)
  } else if (props.videoType === 'flv') {
    // flv.js runs only in the browser environment and does an asynchronous processing for SSR prerender.
    import('/src/cesiumTools/flvjs-tech.js')
      .then(({ FlvJsTech }) => {
        videojs.registerTech('Flvjs', FlvJsTech)
        player.src(props.src)
      })
      .catch((error) => {
        console.error('加载FLV技术支持时出错:', error)
      })
  } else {
    console.warn('未知的视频类型:', props.videoType)
  }
}
</script>
<style scoped lang="less"></style>
